<template>
  <div class="smart-plan-landing-container">
    <div class="smart-plan-landing-top mar-b-12">
      <div class="smart-plan-landing-top__left">
        <div class="top-title1 mar-b-8">{{ $t('smartPlan.title') }}</div>
        <div class="top-title2 mar-b-8">{{ $t('smartPlan.title2') }}</div>
        <el-button type="primary" @click="handleApply(10)">{{ $t('smartPlan.contact') }}</el-button>
      </div>
      <div class="smart-plan-landing-top__right">
        <img :src="img1" />
      </div>
    </div>
    <div class="smart-plan-landing-content">
      <div class="smart-plan-landing-title">
        <img :src="img2" />
        {{ $t('smartPlan.productHighlights') }}
      </div>
      <div class="smart-plan-landing-highlights">
        <div class="smart-plan-landing-highlight" v-for="(item, index) in highlightList" :key="index">
          <img :src="item.src" />
          <div class="highlight-title mar-b-16">{{ item.title }}</div>
          <div class="highlight-desc mar-b-16">{{ item.desc }}</div>
          <el-button type="info" plain @click="handleApply(item.type)">{{ $t('smartPlan.consultation') }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { postPage, getRootWindow } from 'pub-bbx-utils'
import { saveValueAddedClue } from '@src/api/Clue'
import { t } from '@src/locales'
import { getOssUrl } from '@src/util/assets'
const img1 = getOssUrl('/smartPlan/image.png')
const img2 = getOssUrl('/smartPlan/idea.png')
const pic_1 = getOssUrl('/smartPlan/pic_1.png')
const pic_2 = getOssUrl('/smartPlan/pic_2.png')
const pic_3 = getOssUrl('/smartPlan/pic_3.png')


export default {
  name: 'smart-plan-landing',
  data() {
    return {
      img1,
      img2,
      highlightList: [{
        src: pic_1,
        title: t('smartPlan.highlightTitle[0]'),
        desc: t('smartPlan.highlightDesc[0]'),
        type: 11
      }, {
        src: pic_2,
        title: t('smartPlan.highlightTitle[1]'),
        desc: t('smartPlan.highlightDesc[1]'),
        type: 12
      }, {
        src: pic_3,
        title: t('smartPlan.highlightTitle[2]'),
        desc: t('smartPlan.highlightDesc[2]'),
        type: 13
      }]
    }
  },
  methods: {
    handleApply(type){
      if(!sessionStorage.getItem(`clueType${type}`)) {
        sessionStorage.setItem(`clueType${type}`, 'true')
        saveValueAddedClue({ type })
      }
      const rootWindow = getRootWindow(window)
      if(rootWindow?.grayAuth?.exclusiveCsIM) {
        postPage({
          action: 'shb.system.openChat',
          data: {},
        })
      } else {
        this.$platform.alert(t('component.imApplyVideoModal.applySuccessTip'))
      }
    } 
  },
}
</script>
<style lang="scss" scoped>
.smart-plan-landing-container {
  display: flex;
  flex-direction: column;
  padding: 12px;
  height: 100%;
  .smart-plan-landing-top {
    height: 220px;
    background: url('@src/assets/img/smartPlan/bg.png') no-repeat center;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    padding: 27px 48px 9px 23px;
    &__left {
      width: 70%;
    }
    .top-title1 {
      font-size: 36px;
      font-weight: bold;
      @include text-ellipsis();
    }
    .top-title2 {
      font-size: 18px;
      color: #8C8C8C;
      @include text-ellipsis-2();
    }
    &__right {
      img {
        height: 100%;
      }
    }
  }
  .smart-plan-landing-content {
    flex: 1;
    padding: 12px 24px;
    border-radius: 16px;
    background: #FFFFFF;
    .smart-plan-landing-title {
      display: flex;
      align-items: center;
      padding: 0 16px;
      line-height: 54px;
      color: #FAAB0C;
      img {
        width: 16px;
        height: 16px;
        margin-right: 3px;
      }
    }
    .smart-plan-landing-highlights {
      display: flex;
      .smart-plan-landing-highlight {
        width: 33.33%;
        padding: 12px 16px;
        img {
          width: 100%;
          margin-bottom: 18px;
        }
        .highlight-title {
          font-size: 18px;
          font-weight: bold;
          @include text-ellipsis();
        }
        .highlight-desc {
          @include text-ellipsis-2();
        }
        .el-button--info.is-plain {
          background: #F5F8FA;
          color: #595959;
          font-weight: normal;
        }
      }
    }
  }
}
</style>